<!DOCTYPE <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Canvas Test</title>
</head>

<body>

    <canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <script>
        //创建 Context 对象
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        //绘制色块
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 50, 50);
        //绘制线条
        ctx.moveTo(0, 0);
        ctx.lineTo(50, 50);
        ctx.stroke();
        //绘制半圆          
        ctx.beginPath();
        ctx.arc(25, 25, 25, 3 * Math.PI / 2, Math.PI / 2);
        ctx.stroke();
        //绘制实心文字
        ctx.font = "30px Arial";
        ctx.fillText("ATU", 80, 25);
        //绘制空心文字
        ctx.font = "30px Arial";
        ctx.strokeText("ATU", 150, 25);
        //绘制线性渐变
        // Create gradient
        var grd = ctx.createLinearGradient(0, 0, 200, 0);
        grd.addColorStop(0, "red");
        grd.addColorStop(1, "white");

        // Fill with gradient
        ctx.fillStyle = grd;
        ctx.fillRect(10, 100, 150, 80);
    </script>



</body>

</html>